import { merge } from 'lodash-es';
import { Slots } from 'vue';
import type { ActionItem } from '/@/components/Table';
import { TableAction } from '/@/components/Table';
import { extendSlots } from '/@/utils/helper/tsxHelper';

export type CreateActionType = 'inline' | 'top' | 'dropDown';
export type CreateActionUse = 'tsx' | 'vue' | 'original';
export type CreateTableActionConfig<T extends CreateActionUse> = {
  type?: CreateActionType;
  use?: T;
  outside?: boolean;
};

export function createTableAction<T extends 'tsx' | 'vue'>(
  actions: ActionItem[],
  config?: CreateTableActionConfig<T>,
  slots?: Slots,
): JSX.Element;
export function createTableAction<T extends 'original'>(
  actions: ActionItem[],
  config: CreateTableActionConfig<T>,
  slots?: Slots,
): ActionItem[];
export function createTableAction<T extends CreateActionUse>(
  actions: ActionItem[],
  config?: CreateTableActionConfig<T>,
  slots?: Slots,
): JSX.Element | ActionItem[];
export function createTableAction<T extends CreateActionUse>(
  actions: ActionItem[],
  config?: CreateTableActionConfig<T>,
  slots?: Slots,
) {
  config = merge({ type: 'inline', use: 'tsx' }, config);

  switch (config.type) {
    case 'top':
      actions = actions.map((action) => merge({ size: 'default', type: 'primary' }, action));
      break;
  }

  switch (config.use) {
    case 'tsx':
    case 'vue':
      return (
        <TableAction
          {...{
            [config.type === 'dropDown' ? 'dropDownActions' : 'actions']: actions,
            outside: config.outside,
          }}
          stopButtonPropagation
        >
          {slots && extendSlots(slots)}
        </TableAction>
      );
    case 'original':
      return actions;
  }
}
